class Render {
  constructor(cards) {
    this.cards = cards;
    //地点权重
    {
      let places_num = [8, 5, 7, 8, 22, 18, 12];
      let lcmVal = this.calcLCM(places_num);
      console.log("最小公倍数是: " + lcmVal);
      let sum = 0;
      let quotients = [];
      let weights = [];
      places_num.forEach(n => {
        quotients.push(lcmVal / n);
        sum += lcmVal / n
      });
      quotients.forEach(quotient => {
        weights.push(quotient / sum * 100);
        console.log(quotient / sum * 100);
      });

      this.places_weight =
      {
        hd: weights[0],
        yhgh: weights[1],
        jmh: weights[2],
        flm: weights[3],
        p1: weights[4],
        p2: weights[5],
        p3: weights[6],
      }
    }
    //
    this.resource_weight = 
    {
      water : 20,
      money : 10,
      spices : 30,
      conspiracy : 20,
      league : 25,
      vp : 100
    }
  }

  getPicPath(idx)
  {
    idx = idx + 1;
    return `./image/dune_img (${idx}).jpg`;
  }

  calcLCM(numbers) {
    function gcd(a, b) {
      if (b == 0) {
        return a;
      } else {
        return gcd(b, a % b);
      }
    }

    function lcm(a, b) {
      return (a * b) / gcd(a, b);
    }

    //var numbers = [8, 5, 7,8,22,18,12];
    var lcmVal = numbers[0];

    for (var i = 1; i < numbers.length; i++) {
      lcmVal = lcm(lcmVal, numbers[i]);
    }

    return lcmVal;
  }

  fillSelectList() {
    var counter = 0;
    this.cards.forEach(card => {
      //console.log(card.name);
      {
        let option = document.createElement('option');
        option.text = card.name;
        option.value = counter;
        let selectItem = document.getElementById('cardsList_A');
        selectItem.add(option);
      }
      //填充第二个下拉菜单
      {
        let option = document.createElement('option');
        option.text = card.name;
        option.value = counter;
        let selectItem = document.getElementById('cardsList_B');
        selectItem.add(option);
      }
      counter++;
    });
  }

  analyze(idx,dataID = 0) {
    let card = this.cards[idx];
    console.log(card);
    //移动能力
    let move_ability =
    Number(card.hd) * this.places_weight.hd +
    Number(card.yhgh) * this.places_weight.yhgh +
    Number(card.jmh) * this.places_weight.jmh +
    Number(card.flm) * this.places_weight.flm +
    Number(card.p1) * this.places_weight.p1 +
    Number(card.p2) * this.places_weight.p2 +
    Number(card.p3) * this.places_weight.p3;
    //move_ability = move_ability.toFixed(0);
    //战斗力
    let atk_ability = (Number(card.atk) + Number(card.soldier)*2) * 10;
    //atk_ability = atk_ability.toFixed(0);
    //购买能力
    let buy_ability = Number(card.power) / Number(card.cost) * 100;
    //buy_ability = buy_ability.toFixed(0);
    //资源能力
    let resource_ability = 
    Number(card.water) * this.resource_weight.water +
    Number(card.money) * this.resource_weight.money +
    Number(card.spices) * this.resource_weight.spices +
    Number(card.conspiracy) * this.resource_weight.conspiracy +
    Number(card.league) * this.resource_weight.league +
    Number(card.vp) * this.resource_weight.vp;
    resource_ability = Math.max(0,resource_ability);
    resource_ability = Math.min(100,resource_ability);

    //卡驱行为,删牌，过牌，羁绊
    let behaviour_ability = Number(card.remove) +  Number(card.pass) +  Number(card.jmh_race) +  Number(card.flm_race) ; 
    behaviour_ability = behaviour_ability * 25; 
    behaviour_ability = Math.min(100,behaviour_ability);
    //主观打分
    let offset = Number(card.offset) * 10 + 50;


    this.option.series[0].data[dataID].value = [move_ability,atk_ability,buy_ability,resource_ability,behaviour_ability,offset]
    this.option.series[0].data[dataID].name = card.name;
    this.myChart.setOption(this.option);
    //
    var img_id_name = dataID==0?"img_cardA":"img_cardB";
    var img_item = document.getElementById(img_id_name);
    img_item.src = this.getPicPath(Number(idx));
  }

  create() {
    this.myChart = echarts.init(document.getElementById('main'), 'dark');
    this.option = {
      color: ['#FFE434','#67F9D8'],
      /*title: {
        text: '沙丘基础卡牌战力图',
        textStyle:
        {
          fontSize: 30
        }
      },*/
      legend: {
        left: 'center',
      },
      radar: [
        {
          indicator: [
            { text: '移动能力', max: 100 },
            { text: '战斗能力', max: 100 },
            { text: '购买能力', max: 100 },
            { text: '资源提供', max: 100 },
            { text: '卡驱行为', max: 100 },
            { text: '主观调整', max: 100 }
          ],
          center: ['50%', '50%'],
          radius: 120,
          axisName: {
            color: '#fff',
            //backgroundColor: '#333',
            //borderRadius: 3,
            //padding: [5, 5],
            fontSize: 15,
            padding: 12
          }
        }
      ],
      series: [
        {
          type: 'radar',
          radarIndex: 0,
        }
      ]
    };

    this.myChart.setOption(this.option);

    this.option = {
      series: [
        {
          data: [               
            {
              value: [50, 50, 50, 50, 50, 50],
              z:10,
              name: '卡牌A',
              symbolSize: 4,
              areaStyle: {
                color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                  {
                    color: 'rgba(255, 145, 124, 0.1)',
                    offset: 0
                  },
                  {
                    color: 'rgba(255, 145, 124, 0.9)',
                    offset: 1
                  }
                ])
              },
              label: {
                show: true,
                color: '#FFE434',
                formatter: function (params) {
                  if(params.value == 0) return "";
                  return params.value.toFixed(0);
                }
              }
            },
            {
              value: [100, 100, 100, 100, 100, 100],
              name: '卡牌B',
              lineStyle: {
                type: 'dashed'
              },
              symbolSize: 2,
              label: {
                show: false,
                color: '#67F9D8',
                formatter: function (params) {
                  return params.value;
                }
              }
            },     
          ]
        }
      ]

    }

    this.myChart.setOption(this.option);
  }
}
